<template>
	<el-row :gutter="20" >
	  <el-col :span="7"  >
				<div style="background-color: #E1337F;">
					<div style="text-align: center;">
						<el-button type="danger" size="large" style="width: 100%;height: 100%;font-size: 1.25rem;background-color:  #E1337F;" @click="comall()">全部商品分类</el-button>
					</div>
				</div>
				</el-col>
	  <el-col :span="16">
				<div style="text-align: right;">
					<el-button type="danger" size="large" style="background-color: #E1337F;" @click="remai()">热卖中</el-button>  
				</div>
			</el-col>
	</el-row>
	<div style="background-color: #E1337F;height: 0.1rem;"></div>
	   <el-container>
	      <el-aside width="200px" style=" width: 28.2%;">
			  <div   v-for="item in data.type">
				  <el-button style="width: 100%;color: #000000;justify-content: flex-start;border: 0px;" size="large" @click="search(item[1].typeid)">
				  {{item[1].breed[1].breedname}}/{{item[1].typename}}</el-button>
			  </div>
			  </el-aside>
	      <el-main style="background-color: silver;height: 35rem;">
			  <el-carousel height="560px" style="margin: -1.26rem;"  motion-blur>
			    <el-carousel-item v-for="item in data.hot" :key="item" >
			  			 <el-image style="width: 100%;height: 100%;" :src="$ip+`/public/shows/1`+item[1].pic"  />
			  		</el-carousel-item>
			  </el-carousel>
			 </el-main>
	      <el-aside width="200px" style="width: 20%;">
			  <div   v-for="item in data.coms">
				  <div style="width: 100%;height: 5.8rem;">
					  <el-button style="width: 100%;height: 100%;color: #000000;justify-content: flex-start;border: 0px;" size="large" @click="detail(item[1].comid)">
					  								  <el-avatar style="height: 5rem;width: 30%;">
					  								    <el-link ><el-image :src="$ip+`/public/shows/`+item[1].pic" />
					  								  </el-link>
					  								  </el-avatar>
													  <div>
														  <p>{{item[1].comname}}</p>
														  <span>{{item[1].makers}}</span>
													  </div>
														
<!-- 													  <div>
														{{item[1].user[1].uname}}  
													  </div> -->
													  <!-- &emsp; -->
													  <div style="color: #f56c6c; font-size: 1.25rem; margin-left: auto;">
														   ¥{{item[1].price}}
													  </div>
					 </el-button>
				  </div>
			  			  
			  </div>
			  
			  
			 </el-aside>
	    </el-container>
		&emsp;&emsp;
		<el-row :gutter="20" >
		  <el-col :span="7"  >
					<div style="background-color: #E1337F;">
						<div style="text-align: center;">
							<el-button type="danger" size="large" style="width: 100%;height: 100%;font-size: 1.25rem;background-color: #E1337F;" @click="rec(undefined)">商品推荐</el-button>
						</div>
					</div>
					</el-col>
		  <el-col :span="16">
					<div style="text-align: right;">
						<div style="display: flex; height: 2.5rem;">
							<el-menu
							:default-active="activeIndex"
							class="el-menu-demo"
							mode="horizontal"
							:ellipsis="false"
							:router="true"
							@select="handleSelect"
							text-color="#000000"
							active-text-color="#F007D9"
							style="margin-top: -0.9rem;" >
								<el-link @click="rec(-1)" style="font-size: 1rem; width: 4rem;">限时抢购</el-link>
							</el-menu>
							&emsp;
							
							<el-menu
							:default-active="activeIndex"
							class="el-menu-demo"
							mode="horizontal"
							:ellipsis="false"
							:router="true"
							@select="handleSelect"
							text-color="#000000"
							active-text-color="#F007D9"
							style="margin-top: -0.9rem;"  v-for="item in data.type">
								<el-link @click="rec(item[1].typeid)" style="font-size: 1rem;width: 4rem;">{{item[1].typename}}</el-link>
								&emsp;
							</el-menu>
						</div>

					</div>
				</el-col>
		</el-row>
		<div style="background-color: #E1337F;height: 0.1rem;"></div>
		&emsp;&emsp;
		<router-view :key="route.fullPath"></router-view>
</template>

<script lang="ts" setup>
	import {ref, reactive,onMounted,computed} from"vue"
		import {$get,$postx,$postj,$postf} from '../../ajax/index.js'
		import { ElMessage, ElMessageBox } from 'element-plus'
		import router from"../../router/index.js"
		import store from "../../store/index.js"
		import {Search,ShoppingCart} from '@element-plus/icons-vue'
		import bottom from "../../components/bottom.vue"
		import {useRoute} from "vue-router"
		import {success,warning,message,errors} from '../../store/alert.js'
		const activeIndex = ref('1')
		
		const route = useRoute()
		const handleSelect = (key: string, keyPath: string[]) => {
		  console.log(key, keyPath)
		}
		const data=reactive({
			search:'',
			item:[{},{}],
			coms:[],
			hot:[],
			type:[]
		})
		function comall(){
			console.log("全部产品分类")
			router.push("/home/search")
			
		}
		
		function search(typeid){
			console.log(typeid)
			router.push({
				path: '/home/search',
				query: {
					search: typeid
				}
			})
			
		}
		function remai(){
			
			
			console.log("热卖中")
		}
		function rec(typeid){
				router.push({
					path: '/home/com/recom',
					query: {
						id:typeid
					}
				})
			console.log("推荐"+typeid)
			console.log(data.rec)
		}
		
		
		
		function detail(comid){
		router.push({
			path: '/home/detail',
			query: {
				comid: comid
			}
		})
		}
		
		
		onMounted(()=>{
				router.push("/home/com/recom")
			$get("/public/home").then(function(resd){
				console.log(resd.data)
				let com=resd.data[1].data[1].com[1]
				let hot=resd.data[1].data[1].hot[1]
				let type=resd.data[1].data[1].type[1]
				data.hot=hot
				data.coms=com
				data.type=type
				
				// console.log("类型")
				// console.log(com)
				
			})
		})
		
</script>

<style>
</style>
